<template>
  <div class="container flex-center">
    <div class="main">
      <div class="logo">
        <img src="@/assets/app/vue-logo.png" />
        <img src="@/assets/app/ant-logo.png" />
        <img src="@/assets/app/vite-logo.svg" />
      </div>
      <a-form class="form" :model="formState" layout="vertical">
        <a-form-item>
          <a-input size="large" v-model:value="formState.account" placeholder="  请输入集团账号：0001">
            <template #prefix>
              <TeamOutlined class="icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input size="large" v-model:value="formState.loginName" placeholder="  请输入用户账号：admin">
            <template #prefix>
              <user-outlined class="icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            size="large"
            type="password"
            v-model:value="formState.password"
            placeholder="  请输入密码：123456"
          >
            <template #prefix>
              <lock-outlined class="icon" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button size="large" type="primary" block @click="onLogin" :loading="loading">确定</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined, TeamOutlined } from "@ant-design/icons-vue";
import { notification } from 'ant-design-vue';
import { addRoute } from '@/router/router';
import { setUserInfo, setUserToken, getGotoRouteName } from '@/utils/user';
import { userLogin, UserLoginReq } from '@/api/user';
import { message } from 'ant-design-vue';
export default defineComponent({
  name: 'login',
  components: { UserOutlined, LockOutlined, TeamOutlined },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const formState = reactive<UserLoginReq>({
      account: "",
      loginName: "",
      password: "",
    });
    const onLogin = async () => {
      loading.value = true;
      try {
        const { token } = await userLogin(formState);
        setUserToken(token);
        await setUserInfo();
        addRoute();
        const gotoName = getGotoRouteName();
        if (!gotoName) throw message.error('未配置菜单权限，请联系管理员进行配置！');
        await router.push({ name: gotoName });
        notification.success({ message: '登录成功', description: '欢迎回来：User Admin' });
      } catch (error) {
        console.error(error);
        loading.value = false;
      }
    };
    return {
      formState,
      onLogin,
      loading
    };
  },
});
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .main {
    min-width: 360px;
    .logo {
      text-align: center;
      img {
        padding: 40px 10px;
        width: 100px;
      }
    }
    .icon {
      color: @primary-color;
    }
  }
}
</style>